<template>
  <div id="RegistrationStatistics">
    <div class="banner">
      <p>
        <span>首页</span>
        <span> / </span>
        <span>数据统计</span>
        <span> / </span>
        <span class="title">用户统计</span>
      </p><br>
      <p class="header">挂号统计</p>
    </div>

    <div class="bx">
      <div class="DepartmentIncome">
        <h3>各科室收入</h3>
        <div class="button">
          <span v-for="(item,index) in timedate" :key="index" @click="change(index)" :class="currentIndex === index ? 'active':''" >{{item}}</span>
        </div>
        <div id="mincome" ref="mincome"></div>
      </div>

      <div class="hospitalmentIncome">
        <h3>医院收入top10</h3>
        <div class="button">
          <span v-for="(item,index) in timedate" :key="index" @click="change1(index)" :class="currentIndex1 === index ? 'active':''" >{{item}}</span>
        </div>
        <div id="hospitalIncome" ref="hospitalIncome">
          <el-table :data="hospitallist.list" style="width: 70%;margin-left: 100px;" v-show="currentIndex1==0" :cell-style="{'text-align':'center'}">
            <el-table-column prop="id" label="序号" width="180" header-align="center"/>
          <el-table-column prop="address" label="名称" width="300" header-align="center"/>
          <el-table-column prop="money" label="收入" header-align="center"/>
          </el-table>
          <el-table :data="jhospitallist.list" style="width: 70%;margin-left: 100px;" v-show="currentIndex1==1" :cell-style="{'text-align':'center'}">
            <el-table-column prop="id" label="序号" width="180" header-align="center"/>
          <el-table-column prop="address" label="名称" width="300" header-align="center"/>
          <el-table-column prop="money" label="收入" header-align="center"/>
          </el-table>
          <el-table :data="nhospitallist.list" style="width: 70%;margin-left: 100px;" v-show="currentIndex1==2" :cell-style="{'text-align':'center'}">
            <el-table-column prop="id" label="序号" width="180" header-align="center"/>
          <el-table-column prop="address" label="名称" width="300" header-align="center"/>
          <el-table-column prop="money" label="收入" header-align="center"/>
          </el-table>
        </div>
      </div>

      <div class="doctorIncome">
        <h3>医生收入top10</h3>
        <div id="doctorIncome" ref="doctorIncome" >
          <el-table :data="userlist.list" style="width: 83%;margin-left: 60px;" height='450'>
            <el-table-column prop="id"  width="100" />
            <el-table-column prop="img"  width="100" />
            <el-table-column prop="name"  width="180" />
            <el-table-column prop="money"  width="100"/>
            <el-table-column prop="address"  width="180"/>
          </el-table>
        </div>
      </div>
    </div>



  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { reactive, ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import axios from "axios";

var timedate=ref(["本月","本季度","本年"])
var currentIndex=ref(0);
var currentIndex1=ref(0);
var mdepartment=reactive({});
var hospitallist=ref({list:[]});
var jhospitallist=ref({list:[]});
var nhospitallist=ref({list:[]});
var userlist=ref({list:[]});

const doctorlist=[
  {id:1,img:'',name:'张三',money:'230',address:'北京'},
  {id:2,img:'',name:'李四',money:'330',address:'南京'},
]


onMounted(()=>{
  axios.get('/api/mdepartment/list').then((res)=>{
    mdepartment=res.data.list;
    mIncome()
  }),
  axios.get('/api/hospital/list').then((res)=>{
    jhospitallist.value.list=res.data.list;
  }),
  axios.get('/api/jhospital/list').then((res)=>{
    hospitallist.value.list=res.data.list;
  }),
  axios.get('/api/nhospital/list').then((res)=>{
    nhospitallist.value.list=res.data.list;
  }),
  axios.get('/api/user/list').then((res)=>{
    userlist.value.list=res.data.list;
  })
})

function mIncome () {
	let newPromise = new Promise((resolve) => {
		resolve()
	})
	newPromise.then(() => {
    if (incomeChart != null && incomeChart != "" && incomeChart != undefined) {
      incomeChart.dispose();//销毁
    }else{
    if(currentIndex.value==0){
      var incomeChart=echarts.init(document.getElementById('mincome'));  
      incomeChart.setOption({
        title: {
          text: ''
        },
        tooltip: {},
        xAxis: {
          data: ['皮肤科', '妇产科', '男科', '儿科', '中医科','内科','外科','眼科','口腔科','骨科','传染科','体检科',]
        },
        yAxis: {},
        series: [
          {
            name: '收入',
            type: 'bar',
            data: [mdepartment[0]['皮肤科'],mdepartment[0]['妇产科'],mdepartment[0]['男科'],mdepartment[0]['儿科'],mdepartment[0]['中医科'],mdepartment[0]['内科'],mdepartment[0]['外科'],mdepartment[0]['眼科'],mdepartment[0]['口腔科'],mdepartment[0]['骨科'],mdepartment[0]['传染科'],mdepartment[0]['体检科'],]
          }
        ]
      });
    }else if(currentIndex.value==1){
    var incomeChart=echarts.init(document.getElementById('mincome'));  
    incomeChart.setOption({
      title: {
        text: ''
      },
      tooltip: {},
      xAxis: {
        data: ['皮肤科', '妇产科', '男科', '儿科', '中医科','内科','外科','眼科','口腔科','骨科','传染科','体检科',]
      },
      yAxis: {},
      series: [
        {
          name: '收入',
          type: 'bar',
          data: [mdepartment[1]['皮肤科'],mdepartment[1]['妇产科'],mdepartment[1]['男科'],mdepartment[1]['儿科'],mdepartment[1]['中医科'],mdepartment[1]['内科'],mdepartment[1]['外科'],mdepartment[1]['眼科'],mdepartment[1]['口腔科'],mdepartment[1]['骨科'],mdepartment[1]['传染科'],mdepartment[1]['体检科'],]
        }
      ]
    });
    }else{
      var incomeChart=echarts.init(document.getElementById('mincome'));  
    incomeChart.setOption({
      title: {
        text: ''
      },
      tooltip: {},
      xAxis: {
        data: ['皮肤科', '妇产科', '男科', '儿科', '中医科','内科','外科','眼科','口腔科','骨科','传染科','体检科',]
      },
      yAxis: {},
      series: [
        {
          name: '收入',
          type: 'bar',
          data: [mdepartment[2]['皮肤科'],mdepartment[2]['妇产科'],mdepartment[2]['男科'],mdepartment[2]['儿科'],mdepartment[2]['中医科'],mdepartment[2]['内科'],mdepartment[2]['外科'],mdepartment[2]['眼科'],mdepartment[2]['口腔科'],mdepartment[2]['骨科'],mdepartment[2]['传染科'],mdepartment[2]['体检科'],]
        }
      ]
    });
    }
    
  }
	})
}

var change=(index)=>{
  currentIndex.value=index;
  mIncome();
}
var change1=(index)=>{
  currentIndex1.value=index;
}




</script>

<style scoped>
.banner{
  height: 80px;
  width: 100%;
  background-color: #fff;
  margin-bottom: 40px;
  position: absolute;
  top:61px;
  left: 15%;
  padding-top: 20px;
  z-index: 999;
}
.banner p{
  font-size: 12px;
  color: #AAA;
}
.banner .title{
  color: #000;
}
.banner .header{
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
#RegistrationStatistics .bx{
  width: 800px;
  /* height: 500px; */
  margin: auto;
  margin-top: 120px;
  /* background: #fff; */
  overflow: hidden;
}
#RegistrationStatistics .bx .button{
  margin: 20px 0 0 20px;
  border-radius: 5px;
  border: 1px solid blue;
  width: 280px;
  display: flex;
  justify-content: space-between;
  text-align: center;

}
#RegistrationStatistics .bx .button span{
  font-size: 12px;
  display: inline-block;
  width: 100px;
  height: 25px;
  line-height:25px;
  color: blue;
  cursor: pointer;
  /* border: 1px solid blue; */
}
#RegistrationStatistics .bx .DepartmentIncome{
  margin-bottom: 40px;
  background: white;
}
#RegistrationStatistics .bx .DepartmentIncome .button span.active{
  background: blue;
  color: white;
}
#RegistrationStatistics .bx .hospitalmentIncome .button span.active{
  background: blue;
  color: white;
}
#RegistrationStatistics .bx .DepartmentIncome #mincome{
  width: 100%;
  height: 350px;
}
h3{
  margin: 10px 0 10px 24px;
}
#RegistrationStatistics .bx .hospitalmentIncome{
  margin-bottom: 40px;
  background: white;
  height: 600px;
}
#RegistrationStatistics .bx .doctorIncome{
  margin-bottom: 40px;
  background: white;
  height: 600px;
}
</style>